// edit-trace.js
import {diffChars} from 'diff';

const EditTrace = {
    install(app) {
        app.directive('edit-trace', {
            mounted(el, binding, vnode) {
                const input = el;
                const initialValue = binding.value;
                const maxSize = binding.arg ? parseInt(binding.arg, 10) : 300;

                const handleInput = (event) => {
                    let newValue = input.value;
                    if (newValue.length > maxSize) {
                        event.preventDefault();
                        newValue = newValue.slice(0, maxSize);
                        input.value = newValue;
                    }
                    const diff = getDiff(initialValue, newValue);
                    if (vnode.component) {
                        vnode.component.emit('edit-trace', diff, newValue);
                    } else {
                        const event = new CustomEvent('edit-trace', {detail: {diff, newValue}});
                        el.dispatchEvent(event);
                    }
                };

                const handlePaste = (event) => {
                    //event.preventDefault();
                    const pasteData = (event.clipboardData || window.clipboardData).getData('text');
                    const start = input.selectionStart;
                    const end = input.selectionEnd;
                    let newValue = input.value.slice(0, start) + pasteData + input.value.slice(end);
                    if (newValue.length > maxSize) {
                        event.preventDefault();
                        newValue = newValue.slice(0, maxSize);
                        input.value = newValue;
                    }
                    const diff = getDiff(initialValue, newValue);
                    if (vnode.component) {
                        vnode.component.emit('edit-trace', diff, newValue);
                    } else {
                        const customEvent = new CustomEvent('edit-trace', {detail: {diff, newValue}});
                        el.dispatchEvent(customEvent);
                    }
                };

                input.addEventListener('input', handleInput);
                input.addEventListener('paste', handlePaste);
            }
        });
    }
};

function getDiff(oldValue, newValue) {
    const diffs = diffChars(oldValue, newValue);

    const diff = {added: [], removed: []};
    let index = 0;
    let removeIndex = 0;

    console.log(diffs)

    diffs.forEach(diffItem => {
        const {added, removed, value} = diffItem;
        if (added) { // Insert
            value.split('').forEach((char, i) => {
                diff.added.push({char, index: index + i});
            });
            index += value.length;
        } else if (removed) { // Delete
            value.split('').forEach((char, i) => {
                diff.removed.push({char, index: removeIndex + i});
            });
        } else {
            index += value.length;
        }
        removeIndex += value.length;
    });

    console.log(diff)

    return diff;
}

export default EditTrace;